<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-tabs type="border-card">
        <sdn-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
          我的行程
        </sdn-tab-pane>
        <sdn-tab-pane label="消息中心">消息中心</sdn-tab-pane>
        <sdn-tab-pane label="角色管理">角色管理</sdn-tab-pane>
        <sdn-tab-pane label="定时任务补偿">定时任务补偿</sdn-tab-pane>
      </sdn-tabs>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      activeName: 'second'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  setup() {
    const btnDesc = {
      title: "基础用法",
      describe: "基础的按钮用法。",
      codeBlock: `<sdn-tag>标签一</sdn-tag>
      <sdn-tag type="success">标签二</sdn-tag>
      <sdn-tag type="info">标签三</sdn-tag>
      <sdn-tag type="warning">标签四</sdn-tag>
      <sdn-tag type="danger">标签五</sdn-tag>`,
      attrs: [{
        "name": "value / v-model",
        "describe": "绑定值，选中选项卡的 name",
        "type": "string",
        "emun": "—",
        "default": "第一个选项卡的 name"
      }, {
        "name": "type",
        "describe": "风格类型",
        "type": "string",
        "emun": "card/border-card",
        "default": "—"
      }, {
        "name": "closable",
        "describe": "标签是否可关闭",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "addable",
        "describe": "标签是否可增加",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "editable",
        "describe": "标签是否同时可增加和关闭",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "tab-position",
        "describe": "选项卡所在位置",
        "type": "string",
        "emun": "top/right/bottom/left",
        "default": "top"
      }, {
        "name": "stretch",
        "describe": "标签的宽度是否自撑开",
        "type": "boolean",
        "emun": "-",
        "default": "FALSE"
      }, {
        "name": "before-leave",
        "describe": "切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。",
        "type": "Function(activeName, oldActiveName)",
        "emun": "—",
        "default": "—"
      }],
      events: [{"name": "tab-click", "describe": "tab 被选中时触发", "params": "被选中的标签 tab 实例"}, {
        "name": "tab-remove",
        "describe": "点击 tab 移除按钮后触发",
        "params": "被删除的标签的 name"
      }, {"name": "tab-add", "describe": "点击 tabs 的新增按钮后触发", "params": "—"}, {
        "name": "edit",
        "describe": "点击 tabs 的新增按钮或 tab 被关闭后触发",
        "params": "(targetName, action)"
      }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
